<template>
    <footer class="my-footer-menu">
        <div class="bottom-tab">
            <div class="tab-item" @touchstart.stop @click="switchTo(item)" v-for="(item, index) in tabBarImgArr"
                :key="index">
                <!-- :src="isSelected === item.title ? item.selected : item.normal" -->
                <img :src="$route.path === item.path ? item.selected : item.normal" :alt="item.title"
                    :title="item.title" />
                <!-- :class="isSelected  === item.title ? 'on' : ''" -->
                <span :class="$route.path  === item.path ? 'on' : ''">
                    {{ item.title }}
                </span>
            </div>
        </div>
    </footer>
</template>

<script>
    export default {
        name: 'commonNavFooter',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 底部图片切换的变量
                tabBarImgArr: [{
                        "title": "首页",
                        "normal": require('@/assets/images/home.png'),
                        "selected": require('@/assets/images/home_active.png'),
                        "path": "/shop/home"
                    },
                    {
                        "title": "产品",
                        "normal": require('@/assets/images/product.png'),
                        "selected": require('@/assets/images/product_active.png'),
                        "path": "/product/home"
                    },
                    {
                        "title": "购物车",
                        "normal": require('@/assets/images/shopping.png'),
                        "selected": require('@/assets/images/shopping_active.png'),
                        "path": "/cart/home"
                    },
                    {
                        "title": "我的",
                        "normal": require('@/assets/images/my.png'),
                        "selected": require('@/assets/images/my_active.png'),
                        "path": "/my/home"
                    }
                ]
            };
        },
        methods: {
            // 点击切换底部导航菜单
            switchTo(obj) {
                // this.isSelected = obj.title;
                this.$router.push(obj.path);
            }
        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss" scoped>
    .my-footer-menu {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
        width: 100%;
        height: 98px;
        background-color: #fff;

        .bottom-tab {
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            -webkit-flex-direction: row;
            justify-content: center;
            -webkit-justify-content: center;

            .tab-item {
                height: 98px;
                flex: 1;
                -webkit-flex: 1;
                font-weight: bold;
                font-size: 18px;
                color: #999;
                letter-spacing: 2px;
                text-align: center;
                padding-top: 11px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;

                img {
                    margin: 0 auto;
                }

                span {
                    padding: 5px 0 0 0;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                }

                img,
                span {
                    display: block;
                }

                .on {
                    color: #2fe4e0;
                }
            }

            .tab-item:first-of-type {
                img {
                    width: 46px;
                    height: 42px;
                }

                span {}
            }

            .tab-item:nth-of-type(2) {
                img {
                    width: 43px;
                    height: 42px;
                }

                span {}
            }

            .tab-item:nth-of-type(3) {
                img {
                    width: 45px;
                    height: 44px;
                }

                span {}
            }

            .tab-item:last-of-type {
                img {
                    width: 42px;
                    height: 42px;
                }

                span {
                    padding-left: 1px;
                }
            }
        }
    }

</style>
